<script type="text/javascript">
{literal}
    $(document).ready(function(){
       // Register autocomplete for medicine name inputs and material name input
       $('input.medName').autocomplete('../Prescription/getAllMedicineNames?set_ajax_view',
			{
			    multiple: false,
			    matchContains: true,
			    autoFill: true,
			    cacheLength: 1,
			    formatItem: function(data, i, total) {      
			        return data[0];
			    }
			}
        );
       $('input.matName').autocomplete('../MedicalMaterial/GetAllMaterialNames?set_ajax_view',
            {
                multiple: false,
                matchContains: true,
                autoFill: true,
                cacheLength: 1,
                formatItem: function(data, i, total) {      
                    return data[0];
                }
            }
        );
        // Onclick on "documentListHeader": show/hide the next table
        $('div.documentListHeader').click(function(){
            $(this).next('table').toggle();
            if ($(this).next('table').css('display') == 'none') {
                $(this).css('background-color', 'silver');
            } else {
                $(this).css('background-color', '#3DC9E6');
            }
        });
    });
{/literal}
</script>
<form id="inputMedicineFrm">
<table id="medTbl" class="grid" style="width: 100%; margin-bottom: 10px;" cellpadding="0" cellspacing="0">
    <caption>{translate}LIST OF MEDICINES{/translate}</caption>
    <thead>
        <tr>
            <th>{translate}Medicine name{/translate}</th>
            <th style="width: 85px">{translate}Quantity{/translate}</th>
            <th style="width: 80px">{translate}Unit price{/translate}</th>
            <th style="width: 80px">{translate}Price{/translate}</th>
            <th style="width: 80px">{translate}Insurance payment{/translate}</th>
            <th style="width: 80px">{translate}Patient payment{/translate}</th>
            <th style="width: 120px">{translate}Issue person{/translate}</th>
            <th style="width: 120px">{translate}Doctor{/translate}</th>
            <th>&nbsp;</th>
        </tr>
    </thead>
    <tbody>
    {foreach from=$medicineList item=medicine}
        <tr id="{$medIndex}">
            <td class="first">
                <input type="text" class="medName" name="medName_{$medIndex}" id="medName_{$medIndex}" value="{$medicine.medicine_name}" style="width: 140px;" onblur="getItemInfo('medicine',{$medIndex})">
                <input type="hidden" name="medId_{$medIndex}" id="medId_{$medIndex}" value="{$medicine.medicine_id}">
            </td>
            <td>
                <input type="text" name="quanNum_{$medIndex}" id="quanNum_{$medIndex}" value="{$medicine.quantity_num}" style="width: 25px;" onblur="validateElement(this.id, 'integer', false)" 
                    onkeypress="return allowEnterIntegerNum(event,true)">
                &nbsp;<input type="text" name="quanTitle_{$medIndex}" id="quanTitle_{$medIndex}" value="{$medicine.quantity_title}" style="width: 40px;"></td>
            <td><input type="text" name="unitPrice_{$medIndex}" id="unitPrice_{$medIndex}" value="{$medicine.unit_price}" style="width: 50px;" onblur="validateElement(this.id, 'float', false)"></td>
            <td>
                <input type="text" name="orgPrice_{$medIndex}" id="orgPrice_{$medIndex}" value="{$medicine.original_price}" style="width: 60px;" onblur="validateElement(this.id, 'float', false)" 
                    onfocus="calculateMedicineOriginalPrice({$medIndex})">
            </td>
            <td>
                <input type="text" name="insPrice_{$medIndex}" id="insPrice_{$medIndex}" value="{$medicine.insurance_price}" style="width: 60px;" onblur="validateElement(this.id, 'float', false)" 
                    onfocus="calculateMedicineInsurancePrice({$medIndex})">
                <input type="hidden" id="unitInsUnitPrice_{$medIndex}" name="unitInsPrice_{$medIndex}" value="{$medicine.insurance_price}">
            </td>
            <td>
                <input type="text" name="patPrice_{$medIndex}" id="patPrice_{$medIndex}" value="{$medicine.patient_price}" style="width: 60px;" onblur="validateElement(this.id, 'float', false)"
                    onfocus="calculateMedicinePatientPrice({$medIndex})">
            </td>
            <td><span id="issuePersonName_{$medIndex}">{$medicine.issue_person_name}</span><input type="hidden" name="issuePerson_{$medIndex}" id="issuePerson_{$medIndex}" value="{$medicine.issue_person}"></td>
            <td><span id="doctorName_{$medIndex}">{$medicine.doctor}</span><input type="hidden" name="doctor_{$medIndex}" id="doctor_{$medIndex}" value="{$medicine.doctor_id}"></td>
            <td class="last">
                <a href="javascript:clearMedicineRow({$medIndex++})" title="{translate}Clear{/translate}">{translate}Clear{/translate}</a>
            </td>
        </tr>
    {/foreach}
    </tbody>
</table>
<table id="matTbl" class="grid" width="100%" cellpadding="0" cellspacing="0">
    <caption>{translate}List of instruments{/translate}</caption>
    <thead>
        <tr>
            <th width="150px;">{translate}Instrument name{/translate}</th>
            <th width="85">{translate}Quantity{/translate}</th>
            <th width="55">{translate}Unit price{/translate}</th>
            <th width="55">{translate}Price{/translate}</th>
            <th width="55">{translate}Insurance payment{/translate}</th>
            <th width="55">{translate}Patient payment{/translate}</th>
            <th width="80">{translate}Issue person{/translate}</th>
            <th width="80">{translate}Doctor{/translate}</th>
            <th>&nbsp;</th>
        </tr>
    </thead>
    <tbody>
    {foreach from=$materialList item=material}
        <tr id="{$matIndex}">
            <td class="first">
                <input type="text" class="matName" name="matName_{$matIndex}" id="matName_{$matIndex}" value="{$material.material_name}" style="width: 140px;" onblur="getItemInfo('material',{$matIndex})">
                <input type="hidden" name="matId_{$matIndex}" id="matId_{$matIndex}" value="{$material.material_id}">
            </td>
            <td>
                <input type="text" name="matQuanNum_{$matIndex}" id="matQuanNum_{$matIndex}" value="{$material.quantity_num}" style="width: 25px;" onblur="validateElement(this.id, 'float', false)" onkeypress="return allowEnterIntegerNum(event,true)">
                &nbsp;<input type="text" name="matQuanTitle_{$matIndex}" id="matQuanTitle_{$matIndex}" value="{$material.quantity_title}" style="width: 40px;">
            </td>
            <td><input type="text" name="matUnitPrice_{$matIndex}" id="matUnitPrice_{$matIndex}" value="{$material.unit_price}" style="width: 50px;" onblur="validateElement(this.id, 'float', false)"></td>
            <td>
                <input type="text" name="matOrgPrice_{$matIndex}" id="matOrgPrice_{$matIndex}" value="{$material.original_price}" style="width: 60px;" onblur="validateElement(this.id, 'float', false)"
                    onfocus="calculateMaterialOriginalPrice({$matIndex})">
            </td>
            <td>
                <input type="text" name="matInsPrice_{$matIndex}" id="matInsPrice_{$matIndex}" value="{$material.insurance_price}" style="width: 60px;" onblur="validateElement(this.id, 'float', false)"
                    onfocus="calculateMaterialInsurancePrice({$matIndex})">
                <input type="hidden" name="matUnitInsPrice_{$matIndex}" id="matUnitInsPrice_{$matIndex}" value="{$material.insurance_price}">
            </td>
            <td>
                <input type="text" name="matPatPrice_{$matIndex}" id="matPatPrice_{$matIndex}" value="{$material.patient_price}" style="width: 60px;" onblur="validateElement(this.id, 'float', false)"
                     onfocus="calculateMaterialPatientPrice({$matIndex})">
            </td>
            <td><span id="matIssuePersonName_{$matIndex}">{$material.issue_person_name}</span><input type="hidden" name="matIssuePerson_{$matIndex}" id="matIssuePerson_{$matIndex}" value="{$material.issue_person}"></td>
            <td><span id="matDoctorName_{$matIndex}">{$material.doctor}</span><input type="hidden" name="matDoctor_{$matIndex}" id="matDoctor_{$matIndex}" value="{$material.doctor_id}"></td>
            <td class="last">
                <a href="javascript:clearMaterialRow({$matIndex++})">{translate}Clear{/translate}</a>
            </td>
        </tr>
	{/foreach}
    </tbody>
</table>
</form>
<div class="separator"></div>

<div>
    <table width="820px;" cellpadding="0" cellspacing="0">
        <tr>
            <td align="right">
                <div style="display: inline-table;">
                    <span id="savingStatusMsg" style="font-style: italic"></span>&nbsp;
                </div>
                <div id="inputMedicineLoaderDiv" style="display: none;">
                    <img src="{$base_uri}/images/ajax-loader.gif"/>
                </div>
                <div id="inputMedicineActionButtonDiv" style="display: inline-table;">
                    <input type="button" onclick="saveInputMedicineMaterial()" style="width: 60px;" title="{translate}Save{/translate}" value="{translate}Save{/translate}">
                </div>
            </td>
        </tr>
    </table>
</div>
